<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:任务实例列表组件
* @fileName:InstanceDetails.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-12
!-->
<script setup lang="ts">
//引入切图
import operationPng from "@/assets/img/host-config/operationPng.png";
//引入匹配方法
import StateEnum from "@/common/enum/state-enum";
//接受参数
const props = defineProps({
  tableData: Array as any,
  detailsFunc: Function as any,
  dataShow: {
    type: Boolean,
    default: false,
  },
  // 数据列表加载动画
  isListLoading: {
    type: Boolean,
    default: true,
  },
});

/**
 * @description:编辑按钮函数
 * @param {any} item
 * @return void
 */
const handleEdit = (item: any) => {
  props.detailsFunc(item);
};
//类型设置
interface IStyleSetting {
  statusGroup: number[];
  styleContent: string;
}
//根据状态匹配颜色
const statusStyleMap: IStyleSetting[] = [
  {
    statusGroup: [StateEnum.Success.getValue(), StateEnum.Operation.getValue()],
    styleContent: "rgba(85, 214, 107, 1)",
  },
  {
    statusGroup: [
      StateEnum.Fail.getValue(),
      StateEnum.InitialFail.getValue(),
      StateEnum.Abnormal.getValue(),
    ],
    styleContent: "rgba(255, 97, 97, 1)",
  },
  {
    statusGroup: [
      StateEnum.Initialing.getValue(),
      StateEnum.Skip.getValue(),
      StateEnum.Wait.getValue(),
    ],
    styleContent: "rgba(84, 115, 230, 1)",
  },
];

/**
 * @description:过滤匹配函数
 * @param {number} num
 * @return void
 */
const filter = (num: number) => {
  const restList = statusStyleMap.filter(
    (m) => m.statusGroup.indexOf(num) > -1
  );
  if (restList) {
    return restList[0].styleContent;
  }
};
</script>

<template>
  <div class="page-details">
    <el-table
      :data="props.tableData"
      v-loading="props.isListLoading"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="taskName"
        label="任务名称"
        width="200px"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="taskResourceName"
        label="资源名称"
        width="200px"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="taskResourceType" label="资源类型" />
      <el-table-column
        prop="serverProgramName"
        label="服务节点"
        width="200px"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="beginTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column prop="diff" label="耗时" width="80px" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <div>
            <span
              class="dot"
              :style="{ backgroundColor: filter(scope.row.status) }"
            ></span>
          </div>
          <div class="stateContent">{{ scope.row.state }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="logLevel" label="日志级别" width="180" />
      <el-table-column label="操作" width="120px" fixex="right">
        <template #default="scope">
          <span class="operation" @click="handleEdit(scope.row)"
            ><el-tooltip
              content="详情"
              transition="none"
              :hide-after="0"
              placement="top"
              ><img :src="operationPng" /></el-tooltip
          ></span>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.operation {
  padding: 0 5px;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.page-details {
  margin-top: 15px;
}
.el-table {
  .dot {
    width: 10px;
    height: 10px;
    line-height: 40px;
    border-radius: 50%;
    display: block;
    float: left;
    margin-left: 10px;
    margin-top: 6px;
    background-color: red;
  }
  .stateContent {
    float: left;
    margin-left: 6px;
  }

  :deep(th) {
    background-color: #fafafa !important;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
</style>
